<template>
	<view>
		<view class="main">
			<view class="name border">
				<view class="txt">
					收货人
				</view>
				<view class="input">
					<input type="text" placeholder='名字' />
				</view>
			</view>
			<view class="cell border">
				<view class="txt">
					手机号
				</view>
				<view class="input">
					<input type="text" value="" placeholder='手机号' />
				</view>
			</view>
			<view class=" border">
				<view class="txt">
					选择地区
				</view>
				<view class="input">
				<input type="text" value="" placeholder='省、市、区、街道' :disabled='true' @click="showTop()" />
				</view>
			</view>
			<view class="address border">
				<view class="txt">
					详细地址
				</view>
				<view class="input">
					<u-input class="textarea" v-model="value" type="textarea" :border="false" :clearable='false'
						:auto-height='true' placeholder='小区名称' />
				</view>
			</view>
			
			<!-- 提交 -->
			<view class="submit">
				保存
			</view>
		</view>
		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import {
		provinceList,a
	} from './area.js'
	export default {
		data() {
			return {
				value: '',
				show: false,
				list:a
			}
		},
		onLoad() {
	
		uni.setNavigationBarTitle({
			title: '编辑地址'
		});
		},
		
		methods: {
			// 
			showTop(){
				this.show=true
			},
			//
			 confirm(e){
				 console.log(e);
			 }
		}
	}
</script>

<style lang="scss">
	.main {
		width: 90%;
		margin: 20rpx auto;

		.address {
			line-height: 140rpx;

			.input {
				margin-top: 45rpx;
			}
		}
	}
	.submit{
		width: 90%;
		height: 80rpx;
		margin: 100rpx  auto;
		text-align: center;
		line-height: 80rpx;
		background-color: #FB9C00 ;
		color: #FFFFFF;
		border-radius: 50rpx;
	}
	.txt {
		width: 150rpx;
		font-size: 36rpx;
	}

	.border {
		display: flex;
		line-height: 100rpx;
		border-bottom: 3rpx solid #ccc;
	}

	.input {
		margin-top: 30rpx;
		margin-left: 50rpx;
		line-height: 100rpx;

	}

	.textarea {
		width: 400rpx;
	}
</style>
